<template>
	<view class="group-join-page">
		<view class="go-home" @click="backHome">
			<image  :src="imglink + 'home/home-Selected.png'" mode=""></image>
		</view>
		<view class="group-join-succed">
			{{pageTitle}}
		</view>
		<view class="group-join-time">
			<view class="">
				订单号:<text>{{order_id}}</text>
			</view>
			<view class="">
				下单时间:<text>{{actMsg.date_added}}</text>
			</view>
		</view>
		<view class="group-join-content" v-if="actMsg">
			
			<view class="group-join-content-top">
				<image :src="actMsg.image.image" mode=""></image>
				<view class="">
					{{actMsg.activity.activity_title | goodName_val}}
				</view>
			</view>
			<view class="group-share">
				<view class="" v-if="actMsg.buy_method != 1&&actMsg.buy_method != 4">{{actMsg.groupCount.quanlity_group_purchase}}人成团，
				还差<text>{{parseInt(actMsg.groupCount.quanlity_group_purchase) - parseInt(actMsg.groupNumber)}}</text>人</view>
				<!-- #ifdef MP-WEIXIN -->
					<button type="default" open-type="share">+立刻邀请好友参加</button>
				<!-- #endif -->
				<!-- #ifdef H5 -->
					<view class="" @click="getStore">+立刻邀请好友参加</view>
				<!-- #endif -->
			</view>
		</view>
		<!-- v-if="actMsg.buy_method != 1 && actMsg.assemble.length!=0" -->
		<view class="group-member-all" v-if="actMsg.buy_method != 1 && memberShow &&actMsg.buy_method != 4">
			<view class="group-member-title">
				拼团成员列表
			</view>
			<view class="group-member-details" v-if="actMsg">
				<view class="group-member-per" v-for="(item,index) in actMsg.assemble" :key='index'>
					<view class="group-member-msg">
						<image :src="item.user_info.avatar" mode=""></image>
						<view class="header-title" v-if="item.regimental == '团长'">团长</view>
						<text>{{item.user_info.nickname}}</text>
					</view>
					<view class="group-member-time">
						<text>{{item.date_added}}</text>
						<!-- <text>15:23:36</text> -->
					</view>
				</view>
			</view>
		</view>
		<uni-popup ref="actCode" :custom="true">
			<view class="popup_box_de">
				<image class="popup_box_close" :src="imglink + 'home/popup-close.png'" @click="popupSwitch"></image>
				<view class="popup_box_content">
					<view class="popup_box_title">
						<view class="line"></view>
						<view class="">关注获取排课/约课</view>
						<view class="line"></view>
					</view>
					<view class="popup_box_title_tip">
						立刻关注公众号获取老师联系方式
					</view>
					<image :src="teacherWay.wechat_qrcode" mode=""></image>
					<view class="popup_box_tip">
						长按上面二维码，立刻识别关注
					</view>
				</view>
			</view>
		</uni-popup>
		<!-- 分享提示 -->
		<uni-popup ref="shareTip" :custom="true">
			<view class="popup_box_de_share">
				<image class="popup_box_close_share" :src="imglink + 'share_tip.png'"></image>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	//#ifdef H5
	import wx from '@/common/wx-js-sdk.js'
	//#endif
	
	export default{
		components:{uniPopup},
		filters: {
			goodName_val(value) {
				if (!value) return ''
				if (value.length > 36) {
					return value.slice(0, 36) + '...'
				}
				return value
			},
		},
		data(){
			return {
				imglink: this.$store.state.imgLink,
				isGroup:'',
				orderTime:'',
				actMsg:'',
				store_id:'',
				order_id:"",
				pageTitle:"",
				teacherWay:"",
				activity_id:0,
				memberShow:true,
				store_info:'',
			}
		},
		onLoad(option){
			console.log(option)
			
			let store_id = parseInt(option.store_id,10);
			if(!store_id>0){
				store_id = uni.getStorageSync('store_id')
			}else{
				uni.setStorageSync('store_id', store_id)
			}
			this.store_id = store_id
			this.$store.commit('updateStoreId',store_id)
			this.order_id = option.order_id
			// this.actMsg =uni.getStorageSync('inviteAct')
			this.getStoreInfo()
		},
		async onShow(){
			await this.gainData()
			// this.orderTime = this.$store.state.orderTime
			// console.log(this.orderTime)
		},
		onShareAppMessage(res) {
			let _self = this
			_self.setActivityShare()
			return {
				title:  _self.store_info.nickname + '邀请您参与' + _self.actMsg.activity.activity_title + '活动', // 分享描述
				path: '/pages/home/organization/activeDetail-Group-3?store_id='+ _self.store_id+ 
					'&actId=' + _self.actMsg.activity_id + '&customer_id=' + _self.store_info.customer_id +
					'&order_id=' + _self.order_id + '&page=share&buy_method=' + _self.actMsg.buy_method + '&invite_type=activity',
				imageUrl: _self.actMsg.image.image, // 分享图标
			}
		},
		
		methods:{
			// 添加活动分享次数
			setActivityShare(){
				let data = {
					token: this.$store.getters.getToken,
					activity_id: this.actMsg.activity_id
				}
				this.$api.add_activity_share(data).then(res => {
					console.log(res)
					
				}).catch(err => {
					console.log(err)
				})
			},
			backHome(){
				uni.navigateTo({
					url:'../home?store_id=' + this.store_id
				})
			},
			popupSwitch(){
				this.$refs.actCode.close()
			},
			getStoreInfo(){
				const data = {
					customer_store_id:this.store_id
				}
				this.$api.getCustomerInfo(data).then(res => {
					this.store_info = res.data.userinfo
				}).catch( err => {
					console.log(err)
				})
			},
			//#ifdef H5
			getStore(){
				
				const _self = this
				
				const data = {
					customer_store_id:_self.store_id
				}
				
				_self.$api.getCustomerInfo(data).then(res => {
					
					if(!res.status){
						return false
					}
					
					const store_info = res.data.userinfo
					// 进行签名的时候  Android 不用使用之前的链接， ios 需要
					let signLink = /(Android)/i.test(navigator.userAgent) ? location.href : window.entryUrl;
					let data = {
						token:_self.$store.getters.getToken,
						url:signLink
					}
					
					_self.$api.gain_share_data(data).then( res => {
						const shareConfig = JSON.parse(res.data)
						
						console.log(shareConfig,'share res.data')
						_self.$refs.shareTip.open()
						wx.config(shareConfig)
						wx.ready(function(){
							
							wx.checkJsApi({
								jsApiList: [
									'updateTimelineShareData',
									'updateAppMessageShareData',
									'onMenuShareAppMessage',
									'onMenuShareTimeline'
								],
								success: function(res) {
									console.log('接口检测成功:'+res);
								},
								error: function(err) {
									console.log('接口检测失败:'+err);
								}
							})
							
							const shareData = { 
								title: _self.actMsg.activity.activity_title, // 分享标题
								desc:  store_info.nickname + '邀请您参与' + _self.actMsg.activity.activity_title + '活动', // 分享描述
								link: _self.current_url()+'/pages/home/organization/activeDetail-3?store_id='+ _self.store_id + '&actId=' + _self.actMsg.activity_id + '&customer_id=' + store_info.customer_id + '&order_id=' + _self.order_id + '&page=share&buy_method=' + _self.actMsg.buy_method,
								imgUrl: _self.actMsg.image.image, // 分享图标
								success: function (res) {
								  console.log(res,'success ---')
								},
								fail:function(err){
									console.log(err.errMsg,'fail ---')
								}
							}
							wx.updateAppMessageShareData(shareData);
							wx.updateTimelineShareData(shareData);
						})
						wx.error(function(res){
							console.log(res,'wx.error')
						})					
					}).catch( err => {
						
						console.log(err)
					})
					
				}).catch( err => {
					console.log(err)
				})
			},
			//#endif
			
			async gainData(){
				let data = {
					token:this.$store.getters.getToken,
					store_id:this.store_id,
					order_id:this.order_id
				}
				let that = this
				await this.$api.gain_order_act_detail(data).then(res => {
					console.log(res)
					if(res.status){
						that.actMsg = res.data
						console.log(that.actMsg,'活动信息')
						if(that.actMsg.buy_method == 1){
							that.pageTitle = '恭喜你，下单成功！'
						}else if(that.actMsg.buy_method == 2){
							that.pageTitle = '恭喜你，参团成功！'
						}else if(that.actMsg.buy_method == 3){
							that.pageTitle = '恭喜你，开团成功！'
						}
						if(that.actMsg.assemble.length == 0){
							this.memberShow =false
						}
						that.gainTeacher(that.actMsg.activity_id)
						// uni.setStorageSync('orderActDetail',this.courseDetail)
						
						
						
					}
				}).catch(err => {
					console.log(err)
				})
			},
			// 获取老师联系方式
			gainTeacher(id){
				let data = {
					token:this.$store.getters.getToken,
					activity_id:id
				}
				let that = this
				this.$api.gain_teacher_contact(data).then(res => {
					console.log(res)
					if(res.status){
						that.teacherWay = res.data
						that.$refs.actCode.open()
						uni.hideLoading()
					}
				}).catch(err => {
					console.log(err)
				})
			},
			inviteOther(){
				uni.setStorageSync('shareAct',this.actMsg)
				uni.navigateTo({
					url:'../organization/shaerPoster/shaerPoster?store_id=' + this.store_id
				})
			}
		}
	}
</script>

<style>
	.go-home{
		width: 60upx;
		height: 60upx;
		border-radius: 50%;
		position: fixed;
		border: 1upx solid #DEDEDE;
		top: 160upx;right: 40upx;
		/* z-index: 777; */
	}
	.go-home>image{
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}
	.popup_box_de_share{
		width: 100%;
		height: 100%;
	}
	.popup_box_close_share{
		width: 300upx;
		height: 300upx;
		position: fixed;
		top: 10upx;right: 10upx;
	}
	.popup_box_title{
		display: flex;
		justify-content: space-between;
	}
	.popup_box_title>view:nth-child(2){
		color: #333333;
		font-size: 34upx;
	}
	.popup_box_title_tip{
		color: #999999;
		font-size: 24upx;
		text-align: center;
		margin-top: 10upx;
	}
	.popup_box_tip{
		color: #666666;
		font-size: 26upx;
		text-align: center;
	}
	.popup_box_title>.line{
		width: 84upx;
		height: 2upx;
		border-top: 1upx solid #DEDEDE;
		margin-top: 24upx;
	}
	.popup_box_de{
		width: 592upx;
		height: 744upx;
		position: relative;
		z-index: 999;
	}
	.popup_box_close{
		width: 52upx;
		height: 52upx;
		position: absolute;
		top: 0;
		right: 0;
	}
	.popup_box_content{
		width: 100%;
		height: 682upx;
		background: #FFFFFF;
		position: absolute;
		top: 72upx;left: 0;
		border-radius: 16upx;
		z-index: 999;
		padding: 40upx 46upx;
		box-sizing: border-box;
	}
	.popup_box_content>image{
		width: 388upx;
		height: 386upx;
		margin: 24upx auto 0;
		margin-left: 40upx;
	}
	page{
		background: #F3F3F4;
	}
	.group-join-page{
		background: #F3F3F4;
	}
	.group-join-succed{
		width: 100%;
		line-height: 128upx;
		text-align: center;
		color: #FFFFFF;
		font-size: 34upx;
		background: linear-gradient(to right,#FE9543,#FF664F);
	}
	.group-join-time{
		width: 100%;
		background: #FFFFFF;
		padding: 30upx;
		box-sizing: border-box;
	}
	.group-join-time>view{
		color: #7F7F7F;
		font-size: 28upx;
	}
	.group-join-time>view:first-child{
		letter-spacing: 10upx;
	}
	.group-join-time>view:last-child{
		margin-top: 20upx;
	}
	.group-join-time>view>text{
		color: #333333;
		letter-spacing: 0;
		display: inline-block;
		margin-left: 10upx;
	}
	.group-join-content{
		width: 100%;
		padding: 0 30upx;
		padding-bottom: 30upx;
		box-sizing: border-box;
		background: #FFFFFF;
		margin-top: 20upx;
	}
	.group-join-content-top{
		width: 100%;
		padding: 30upx 0;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		border-bottom: 1upx solid #DEDEDE;
	}
	.group-join-content-top>image{
		width: 160upx;
		height: 120upx;
	}
	.group-join-content-top>view{
		flex-grow: 1;
		color: #333333;
		font-size: 28upx;
		margin-left: 20upx;
	}
	.group-share{
		margin-top: 30upx;
		width: 100%;
		text-align: center;
	}
	.group-share>view:first-child{
		color: #333333;
		font-size: 28upx;
	}
	.group-share>view:first-child>text{
		color: #FF391F;
	}
	.group-share>view:last-child{
		width: 600upx;
		line-height: 100upx;
		border-radius: 44upx;
		background: linear-gradient(to right,#FE9543,#FF664F);
		box-shadow: 0 8upx 16upx 0 rgba(166, 13, 0, 0.23);
		color: #FFFFFF;
		margin: 0 auto;
		font-size: 32upx;
		margin-top: 14upx;
	}
	.group-share>button{
		width: 600upx;
		line-height: 100upx;
		border-radius: 44upx;
		background: linear-gradient(to right,#FE9543,#FF664F);
		box-shadow: 0 8upx 16upx 0 rgba(166, 13, 0, 0.23);
		color: #FFFFFF;
		margin: 0 auto;
		font-size: 32upx;
		margin-top: 14upx;
	}
	.group-member-all{
		width: 100%;
		padding-bottom: 28upx;
		box-sizing: border-box;
		margin-top: 20upx;
		background: #FFFFFF;
	}
	.group-member-title{
		width: 100%;
		padding: 30upx;
		box-sizing: border-box;
		border-bottom: 1upx solid #DEDEDE;
		color: #333333;
		font-size: 30upx;
	}
	.group-member-details{
		width: 100%;
		padding: 0 30upx;
		box-sizing: border-box;
	}
	.group-member-per{
		width: 100%;
		display: flex;
		padding: 30upx 0;
		box-sizing: border-box;
		justify-content: space-between;
		border-bottom: 1upx solid #DEDEDE;
	}
	.group-member-msg{
		display: flex;
		justify-content: space-between;
		position: relative;
	}
	.group-member-msg>image{
		width: 80upx;
		height: 80upx;
		border-radius: 50%;
	}
	.group-member-msg>view{
		width: 66upx;
		line-height: 28upx;
		border-radius: 14upx 14upx 14upx 0;
		background: #FF8B46;
		text-align: center;
		font-size: 22upx;
		color: #FFFFFF;
		position: absolute;
		top: -8upx;left: 56upx;
	}
	.group-member-msg>text{
		display: inline-block;
		color: #333333;
		font-size: 28upx;
		margin-left: 20upx;
		margin-top: 22upx;
	}
	.group-member-time{
		color: #666666;
		font-size: 28upx;
		margin-top: 22upx;
	}
</style>
